<template>
  <div :style="stylesvalues_div">
    <div class="EnrolmentTeacher_die">
      <div>
        <input
          type="text"
          :placeholder="placeholder"
          v-model="inputvalue"
          @input="inputvalueclc"
          confirm-type="search"
          @confirm="searh"
          placeholder-class="placeholder"
          @focus="placeholder=' '"
          @blur="placeholder='请输入您想了解的招生工作者名称'"
        />
        <div class="blurkuai_div" @click="searh"></div>
      </div>
      <div>
        <p @click="nav_tiao_change">
          <span>选择地区</span>
          <span class="value_input_teach">{{dizhivaluhhhh}}</span>
          <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
        </p>

        <div v-for="(item,index) in searList" :key="index" @click="navgetoMy(item)">
          <div>
            <img
              :src="item.info_avatar?item.info_avatar:'http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%201.png'"
              alt
            />
          </div>
          <div>
            <p>
              <span>{{item.info_nick}}</span>
              <img
                :src="item.info_verified==1?'http://www.zhaoshengku.net/wx-%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81%20%284%29.png':'https://www.zhaoshengku.net/pc-qiye.png'"
                alt
              />
              <img
                :src="item.info_verified==1?'http://www.zhaoshengku.net/wx-%E5%B9%B3%E5%8F%B0.png:https':'https://www.zhaoshengku.net/pc-pingt.png'"
                alt
              />
            </p>
            <p v-if="item.info_tag!=null">
              <span v-for="(i,n) in item.info_tag" :key="n">{{i}}</span>
            </p>
            <p v-else class="none_p">暂无标签</p>
          </div>
          <div>
            <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="meng" :style="windowHeights" v-if="mengisshow" @click.stop="delece_meng"></div>
    <div class="EnrolmentTeacher_two" v-if="mengisshow">
      <div class="EnrolmentTeacher_two_one_div">
        <div>选择地区</div>
        <img src="https://www.zhaoshengku.net/cbacfdaaaed.jpg" alt />
        <div class="hei" @click="delece_meng"></div>
      </div>
      <div class="EnrolmentTeacher_two_two_div">
        <div @click="chearclick(0)" :class="chearclickisv==0?'xuanzhongde':''">{{shengvalue}}</div>
        <div @click="chearclick(1)" :class="chearclickisv==1?'xuanzhongde':''">{{shivalue}}</div>
        <div @click="chearclick(2)" :class="chearclickisv==2?'xuanzhongde':''">{{xianvalue}}</div>
      </div>
      <div>
        <scroll-view scroll-y="true" style="height: 600rpx;" class="scrollview">
          <div v-for="(item,index) in shiquarr" :key="index" @click="earchangvalue(index)">{{item}}</div>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shiquarr: [],
      inputvalue: "",
      searList: [],
      pagenum: 1,
      hideisshow: false,
      searchis: true,
      searLists: [],
      placeholder: "请输入您想了解的招生工作者名称",
      dizhivaluhhhh: "",
      shengvalue: "请选择",
      shivalue: "请选择",
      xianvalue: "请选择",
      chearclickisv: 0,
      shengarr: [],
      getareasSheng: [],
      info_province_id: 0,
      getareasShi: [],
      shiarr: [],
      info_city_id: 0,
      getareasQuxi: [],
      xianarr: [],
      windowHeights: "",
      stylesvalues_div: "",
      mengisshow: false
    };
  },
  methods: {
    // 双向数据绑定
    inputvalueclc(e) {
      this.inputvalue = e.mp.detail.value;
    },
    // 搜索
    searh() {
      var _this = this;
      if (_this.inputvalue == "") {
        wx.showToast({
          title: "搜索内容不能为空",
          icon: "none",
          duration: 2000
        });
        return;
      }
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 2000
      });
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/search",
        method: "post",
        data: {
          type: 10,
          value: _this.inputvalue,
          pagenum: this.pagenum,
          pagesize: 10
        },
        success: res => {
          if (res.data.code == 200) {
            wx.hideToast();
            if (res.data.data.data.length == 0) {
              wx.showToast({
                title: "没有搜索到对应的招生工作者",
                icon: "none",
                duration: 2000
              });
              return;
            }
            _this.searList = res.data.data.data;
          }
        },
        fail: res => {
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 搜索跳主页
    navgetoMy(e) {
      wx.navigateTo({
        url:
          "/pages/myhome/main?id=" +
          e.info_member_id +
          "&expor=0&name=" +
          e.info_subdomain
      });
    },
    chearclick(e) {
      if (e == 0) {
        this.shiquarr = this.shengarr;
      } else if (e == 1) {
        if (this.shengvalue == "请选择") {
          wx.showToast({
            title: "请先选择省",
            icon: "none",
            duration: 1000
          });
          return;
        } else {
          this.shiquarr = this.shiarr;
        }
      } else {
        if (this.shivalue == "请选择") {
          wx.showToast({
            title: "请先选择市",
            icon: "none",
            duration: 1000
          });
          return;
        } else {
          this.shiquarr = this.xianarr;
        }
      }
      this.chearclickisv = e;
    },
    // 选择省
    earchangvalue(e) {
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 5000
      });
      if (this.chearclickisv == 0) {
        this.shengvalue = this.shengarr[e];
        this.info_province_id = this.getareasSheng[e].city_id;
        this.shivalue = "请选择";
        this.xianvalue = "请选择";
        let arr = [];
        //  选择省
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getareas",
          method: "post",
          data: {
            city_pid: this.info_province_id
          },
          success: res => {
            if (res.data.code == 200) {
              this.getareasShi = res.data.data;
              this.getareasShi.forEach(element => {
                arr.push(element.city_name);
              });
              this.shiarr = arr;
              this.shiquarr = arr;
              this.chearclickisv = 1;
              this.dizhivaluhhhh = this.shengvalue;
              wx.request({
                url: "https://api.zhaoshengku.net/api/data/search",
                method: "post",
                data: {
                  type: 10,
                  pagenum: this.pagenum,
                  pagesize: 10,
                  info_province_id: this.info_province_id,
                  value: this.inputvalue
                },
                success: res => {
                  if (res.data.code == 200) {
                    wx.hideToast();
                    if (res.data.data.data.length == 0) {
                      this.searList = res.data.data.data;
                      return;
                    } else {
                      this.searList = res.data.data.data;
                    }
                  }
                },
                fail: res => {
                  if (res.errMsg) {
                    wx.showToast({
                      title: "请检查网络连接！",
                      icon: "none",
                      duration: 1500
                    });
                  }
                }
              });
              wx.hideToast();
            }
          },
          fail: res => {
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      } else if (this.chearclickisv == 1) {
        // 选择市
        this.shivalue = this.shiarr[e];
        this.info_city_id = this.getareasShi[e].city_id;
        this.xianvalue = "请选择";
        let arr = [];
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getareas",
          method: "post",
          data: {
            city_pid: this.info_city_id
          },
          success: res => {
            if (res.data.code == 200) {
              this.getareasQuxi = res.data.data;
              this.getareasQuxi.forEach(element => {
                arr.push(element.city_name);
              });
              this.xianarr = arr;
              this.shiquarr = arr;
              this.chearclickisv = 2;
              this.dizhivaluhhhh = this.shengvalue + "-" + this.shivalue;
              wx.request({
                url: "https://api.zhaoshengku.net/api/data/search",
                method: "post",
                data: {
                  type: 10,
                  pagenum: this.pagenum,
                  pagesize: 10,
                  info_province_id: this.info_province_id,
                  info_city_id: this.info_city_id,
                  value: this.inputvalue
                },
                success: res => {
                  if (res.data.code == 200) {
                    wx.hideToast();
                    if (res.data.data.data.length == 0) {
                      this.searList = res.data.data.data;
                      return;
                    } else {
                      this.searList = res.data.data.data;
                    }
                  }
                },
                fail: res => {
                  if (res.errMsg) {
                    wx.showToast({
                      title: "请检查网络连接！",
                      icon: "none",
                      duration: 1500
                    });
                  }
                }
              });
              wx.hideToast();
            }
          },
          fail: res => {
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      } else {
        this.xianvalue = this.xianarr[e];
        this.info_county_id = this.getareasQuxi[e].city_id;
        this.dizhivaluhhhh =
          this.shengvalue + "-" + this.shivalue + "-" + this.xianvalue;
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/search",
          method: "post",
          data: {
            type: 10,
            pagenum: this.pagenum,
            pagesize: 10,
            info_province_id: this.info_province_id,
            info_city_id: this.info_city_id,
            info_county_id: this.info_county_id,
            value: this.inputvalue
          },
          success: res => {
            if (res.data.code == 200) {
              wx.hideToast();
              if (res.data.data.data.length == 0) {
                this.searList = res.data.data.data;
                this.dizhivaluhhhh = "";
                wx.showToast({
                  title: "没有搜索到对应的招生工作者",
                  icon: "none",
                  duration: 2000
                });
                return;
              } else {
                this.searList = res.data.data.data;
              }
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
        this.delece_meng();

        wx.hideToast();
      }
    },
    nav_tiao_change() {
      this.mengisshow = true;
      this.stylesvalues_div = this.winowHeights + "overflow: hidden;";
    },
    delece_meng() {
      this.shengvalue = "请选择";
      this.shivalue = "请选择";
      this.xianvalue = "请选择";
      this.chearclickisv = 0;
      this.shiquarr = this.shengarr;
      this.shiarr = [];
      this.xianarr = [];
      this.mengisshow = false;
      this.stylesvalues_div = "";
      console.log("1");
    }
  },

  mounted() {
    // 设置头
    wx.setNavigationBarTitle({
      title: "招生工作者"
    });
  },
  onHide() {
    this.inputvalue = "";
    this.searLists = [];
  },
  onShow() {
    this.mengisshow = false;
    this.searchis = true;
    this.pagenum = 1;
    this.searList = this.searLists;
    this.chearclickisv = 0;
    this.dizhivaluhhhh = "";
    this.shengvalue = "请选择";
    this.shivalue = "请选择";
    this.xianvalue = "请选择";
    // 获取省
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/getareas",
      method: "post",
      success: res => {
        console.log(res);
        let arr = [];
        if (res.data.code == 200) {
          this.getareasSheng = res.data.data;
          this.getareasSheng.forEach(element => {
            arr.push(element.city_name);
          });
          this.shengarr = arr;
          this.shiquarr = arr;
          console.log(this.shengarr);
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
    wx.getSystemInfo({
      success: res => {
        this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
      }
    });
  },
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  },
  onReachBottom() {
    var _this = this;
    if (_this.searList.length < 10) {
      return;
    }
    if (_this.hideisshow) {
      return;
    }
    if (_this.searchis) {
      return;
    }
    _this.pagenum += 1;
    wx.showToast({
      title: "",
      icon: "loading",
      duration: 5000
    });
    wx.request({
      url: "https://api.zhaoshengku.net/api/data/search",
      method: "post",
      data: {
        type: 20,
        value: _this.inputvalue,
        pagenum: this.pagenum,
        pagesize: 10
      },
      success: res => {
        if (res.data.code == 200) {
          wx.hideToast();
          if (res.data.data.data.length == 0) {
            _this.hideisshow = true;
            wx.showToast({
              title: "没有更多内容",
              icon: "none",
              duration: 2000
            });
            return;
          } else {
            _this.hideisshow = false;
            _this.searList = _this.searList.concat(res.data.data.data);
          }
        }
      },
      fail: res => {
        console.log(res);
        if (res.errMsg) {
          wx.showToast({
            title: "请检查网络连接！",
            icon: "none",
            duration: 1500
          });
        }
      }
    });
  },
  onLoad(option) {
    if (option.data) {
      this.searLists = JSON.parse(option.data);
      this.inputvalue=option.value;
    }
  }
};
</script>

<style scoped>
.EnrolmentTeacher_two {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
}
.EnrolmentTeacher_two_one_div {
  width: 100%;
  position: relative;
  text-align: center;
}
.scrollview {
  padding: 0 50rpx;
  font-size: 28rpx;
  color: #666;
  height: 60rpx;
  line-height: 60rpx;
}
.EnrolmentTeacher_two_one_div > div {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 25rpx;
  color: #666;
}
.blurkuai_div {
  width: 60rpx;
  height: 60rpx;
  background: none;
  position: absolute;
  top: 31rpx;
  right: 70rpx;
  z-index: 22222222222222;
}
.EnrolmentTeacher_two_two_div {
  display: flex;
  align-items: center;
  height: 60rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 30rpx;
  box-sizing: border-box;
  padding: 0 50rpx;
  justify-content: space-between;
  z-index: 999999999999999999999999999999;
}
.EnrolmentTeacher_two_two_div > div {
  width: 200rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
  height: 60rpx;
  line-height: 60rpx;
}
.EnrolmentTeacher_two_two_div > .xuanzhongde {
  color: rgba(23, 137, 250);
  border-bottom: 1rpx solid rgba(23, 137, 250);
}
.EnrolmentTeacher_two_one_div > img {
  width: 25rpx;
  height: 25rpx;
  position: absolute;
  right: 40rpx;
  top: 38rpx;
}
.meng {
  width: 100%;
  background: rgba(3, 3, 3, 0.4);
  overflow: hidden;
  position: fixed;
  top: 0;
}
.none_p {
  font-size: 23rpx;
  color: #666;
}
.EnrolmentTeacher_die > div:nth-child(1) {
  background: #fff;
  padding: 18rpx 30rpx;
  position: relative;
}
.EnrolmentTeacher_die > div:nth-child(1) > input {
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 100rpx;
  padding: 0 80rpx;
  box-sizing: border-box;
  background: #e5e5e5
    url("http://www.zhaoshengku.net/wx-%E6%90%9C%E7%B4%A2%20%281%29.png")
    no-repeat;
  background-position: 613rpx 20rpx;
  background-size: 39rpx 39rpx;
}
.EnrolmentTeacher_die > div:nth-child(2) {
  padding: 12rpx 30rpx;
}
.value_input_teach {
  flex: 1;
  text-align: right;
  margin-right: 20rpx;
  margin-left: 20rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.EnrolmentTeacher_die > div:nth-child(2) > p {
  padding: 0 33rpx;
  height: 90rpx;
  line-height: 90rpx;
  display: flex;
  justify-content: space-between;
  background: #fff;
  align-items: center;
  border-bottom: 1px solid #dedede;
}
.EnrolmentTeacher_die > div:nth-child(2) > p > span {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
.EnrolmentTeacher_die > div:nth-child(2) > p > img {
  width: 22rpx;
  height: 12rpx;
  transform: rotate(-90deg);
}
.EnrolmentTeacher_die > div:nth-child(2) > div {
  margin-top: 10rpx;
}
.EnrolmentTeacher_die > div:nth-child(2) > div {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 21rpx 24rpx 26rpx 43rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dedede;
}
.EnrolmentTeacher_die > div:nth-child(2) > div > div:nth-child(1) > img {
  width: 98rpx;
  height: 98rpx;
  margin-top: 20rpx;
  border-radius: 50%;
}
.EnrolmentTeacher_die > div:nth-child(2) > div > div:nth-child(1) > p {
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 30rpx;
}
.EnrolmentTeacher_die > div:nth-child(2) > div > div:nth-child(1) {
  width: 98rpx;
  margin-right: 60rpx;
}
.EnrolmentTeacher_die > div:nth-child(2) > div > div:nth-child(2) > p {
  width: 393rpx;
  height: 50%;
  display: flex;
  align-items: center;
}
.EnrolmentTeacher_die
  > div:nth-child(2)
  > div
  > div:nth-child(2)
  > p:nth-child(1) {
  border-bottom: 1rpx solid #dddddd;
}
.EnrolmentTeacher_die
  > div:nth-child(2)
  > div
  > div:nth-child(2)
  > p:nth-child(1)
  span {
    display: inline-block;
    width: 200rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-right: 10rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.EnrolmentTeacher_die
  > div:nth-child(2)
  > div
  > div:nth-child(2)
  > p:nth-child(1)
  img {
  width: 33rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.EnrolmentTeacher_die
  > div:nth-child(2)
  > div
  > div:nth-child(2)
  > p:nth-child(1)
  img:nth-child(3) {
  height: 28rpx;
}
.EnrolmentTeacher_die
  > div:nth-child(2)
  > div
  > div:nth-child(2)
  > p:nth-child(2)
  span {
  display: inline-block;
  width: 111rpx;
  height: 34rpx;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 34rpx;
  background: url("http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%204.png")
    no-repeat;
  background-size: 111rpx 34rpx;
  text-align: center;
  margin-right: 20rpx;
}
.EnrolmentTeacher_die > div:nth-child(2) > div > div:nth-child(3) {
  height: 180rpx;
  display: flex;
  align-items: center;
}
.EnrolmentTeacher_die > div:nth-child(2) > div > div:nth-child(3) img {
  width: 22rpx;
  height: 12rpx;
  transform: rotate(-90deg);
}
.placeholder {
  color: #999;
}
input {
  color: #333;
}
.EnrolmentTeacher_two_one_div > .hei {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  background: none;
  top: 18rpx;
  right: 18rpx;
  z-index: 222222222222222;
}
</style>
